<template>
	<view>
		<uni-forms ref="form" :modelValue="formData" :rules="rules">
			<uni-forms-item required label="账号" name="account">
				<uni-easyinput  type="text" v-model="formData.account" placeholder="请输入邮箱" />
			</uni-forms-item>
			<uni-forms-item required="" label="密码" name="password">
				<input class="input" v-model="formData.password" type="text" placeholder="请输入密码" />
			</uni-forms-item>
			<uni-forms-item required label="昵称" name="nick_name">
				<input class="input" v-model="formData.nick_name" type="text" placeholder="请输入用户昵称" />
			</uni-forms-item>
			<uni-forms-item required label="性别" name="sex">
				<input class="input" v-model="formData.sex" type="text" placeholder="请输入性别" />
			</uni-forms-item>
		</uni-forms>
		<button style="width:40%; background-color: #4CAF50; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;" @click="register">注册</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData:{
					account:"",
					password:"" ,
					nick_name:"",
					sex:""
				},
				rules:{
					account: {
						// name 字段的校验规则
						rules:[
							// 校验 name 不能为空
							{
								required: true,
								errorMessage: '请填写账号',
							},
							// 对name字段进行长度验证

						],
						
					},
					password: {
						// name 字段的校验规则
						rules:[
							// 校验 name 不能为空
							{
								required: true,
								errorMessage: '请填写密码',
							},
							// 对name字段进行长度验证
							{
								minLength: 3,
								maxLength: 8,
								errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
							}
						],
						
					},
					nick_name: {
						// name 字段的校验规则
						rules:[
							// 校验 name 不能为空
							{
								required: true,
								errorMessage: '请填写姓名',
							},
							// 对name字段进行长度验证
							{
								minLength: 3,
								maxLength: 8,
								errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
							}
						],
						
					},
					sex: {
						// name 字段的校验规则
						rules:[
							// 校验 name 不能为空
							{
								required: true,
								errorMessage: '请填写性别',
							},
							// 对name字段进行长度验证
							
						],
						
					},
				}
			}
		},
		methods: {
			
			register(){
				let t=this;
				t.$refs.form.validate().then(res=>{
					uni.request({
						method:"POST",
						url:"http://localhost:3000/getUser",
						data:JSON.stringify({account:t.formData.account}),
						dataType:"application/json",
						success(data) {
							console.log("mlgb:",data)
							if(JSON.parse(data.data)[0].count > 0){
								uni.showToast({
									title:"该账户已注册！",
									icon:'error'
								})
							}
							else{
								uni.request({
									method:"POST",
									url:"http://localhost:3000/register",
									data:JSON.stringify(t.formData),
									dataType:"application/json",
									success(data) {
										uni.showToast({
											title:"注册成功！",
											
											complete() {
												uni.reLaunch({
													url:"/pages/index/login/login"
												})
											}
										})
										
									}
								})
							}
							
						}
					})
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
					
					
					
					
			}
		}
	}
</script>

<style>
.input {
    appearance: none;
    text-align: center;
    height: 36px;
    width: 248px;
    border-radius: 15px;
    border: 0px solid #fff;
    
    outline: 0;
    letter-spacing: 1px;
    color: black;
    font-weight: 600;
    background: rgba(234, 234, 234, 0.1);
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
    text-shadow: 0 1px 2px rgba(0,0,0,.1);
    -o-transition: all .2s;
    -moz-transition: all .2s;
    -webkit-transition: all .2s;
    -ms-transition: all .2s;
	
}
</style>
